<template>
  <div class="home">
    <div class="silebar-show" v-if="showPrise">
      <div class="left">
        <div class="silebar-hea">
          <img
            id="bgbgimg"
            :src="userInfo.img ? /^(http|https):\/\//.test(userInfo.img) ? userInfo.img : url+userInfo.img : userAvatar"
            alt
          />
          <p v-if="!show_nickname">{{userInfo.member_nickname}}</p>
          <p v-if="show_nickname">{{userAVname}}</p>
        </div>
        <div class="silebar-hea-shade"></div>
        <ul>
          <router-link to="/GroupList">
            <li>
              <img src="../assets/silebar-li5.png" alt />
              <span>小V拼游</span>
            </li>
          </router-link>
          <router-link to="/Formulate-submit">
            <li>
              <img src="../assets/silebar-li4.png" alt />
              <span>我要定制</span>
            </li>
          </router-link>
          <a href="https://www.kuaibangxing.com/2cstatic/#/vehicle">
            <li>
              <img src="../assets/silebar-li3.png" alt />
              <span>城市包车</span>
            </li>
          </a>
          <a href="https://www.kuaibangxing.com/2cstatic/#/airport">
            <li>
              <img src="../assets/silebar-li2.png" alt />
              <span>机场接送</span>
            </li>
          </a>
          <router-link to="/About-us">
            <li>
              <img src="../assets/silebar-li-about.png" alt />
              <span>关于我们</span>
            </li>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="content">
      <!--左侧菜单栏-->
      <div class="sidebar-box">
        <div class="sidebar-box-menuicon" v-if="!appNestState" @click="sildelist">
          <img src="../assets/home-menuicon.png" alt />
        </div>
        <div class="sidebar-box-seabox">
          <router-link to="./search" class="search-btn" style="display: none">
            <div class="search-btn-box">
              <img class="search-btn-box-img" src="../assets/index-search-btn.png" />
            </div>
          </router-link>

          <router-link to="./search" class="search-btn1">
            <div class="search-btn1-sea">
              <input type="text" placeholder="搜索目的地城市/活动" />
              <i class="mintui mintui-search"></i>
            </div>
          </router-link>
        </div>
      </div>
      <!--遮罩阴影-->
      <div class="hidden" v-if="showPrise" @click="hiddenPrise"></div>
      <!--轮播图-->
      <div class="mint-banner">
        <mt-swipe
          v-if="swiper.data.length"
          class="mint-swipe"
          :auto="swiper.auto"
          style="height: 100%"
        >
          <mt-swipe-item class="slide1" v-for="item in swiper.data">
            <div @click="swiperRouterTo(item)" class="mint-img-me">
              <img class="mint-swipe-item-img" :src="item.img_src" />
            </div>
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="navList">
        <a href="https://www.kuaibangxing.com/2cstatic/#/vehicle">
          <img src="../assets/nav_car.png" alt />
          <span>城市包车</span>
        </a>
        <a href="https://www.kuaibangxing.com/2cstatic/#/airport">
          <img src="../assets/nav_airport.png" alt />
          <span>机场接送</span>
        </a>
        <a href="#/Formulate-submit">
          <img src="../assets/nav_custom.png" alt />
          <span>定制游</span>
        </a>
        <a href="#/GroupList">
          <img src="../assets/nav_group.png" alt />
          <span>小V拼游</span>
        </a>
      </div>
      <div class="themeList">
        <a href="https://c.kuaibangxing.com/quick_help_wap1/#/getthemegoods/8">
          <img src="../assets/nav_tag_1.png" alt />
          <span>亲子活动</span>
        </a>
        <a href="https://c.kuaibangxing.com/quick_help_wap1/#/getthemegoods/4">
          <img src="../assets/nav_tag_2.png" alt />
          <span>游学研学</span>
        </a>
        <a href="https://c.kuaibangxing.com/quick_help_wap1/#/getthemegoods/6">
          <img src="../assets/nav_tag_3.png" alt />
          <span>夏令营</span>
        </a>
        <a href="https://c.kuaibangxing.com/quick_help_wap1/#/getthemegoods/5">
          <img src="../assets/nav_tag_4.png" alt />
          <span>户外探险</span>
        </a>
      </div>

      <div class="sectionGray">
        <!--拼游线路-->
        <transition name="fade">
            <div class="heashow" ref="heashow" v-if="heashow.length>0">
            <div class="rec">
                <div class="rec-title">小V拼游&nbsp&nbsp</div>
                <span class="rec-long"></span>
                <div class="rec-subtitle">&nbsp&nbsp爆款线路，结伴同游</div>
                <router-link :to="{path:'/GroupList'}">
                <div class="rec-look">
                    查看更多
                    <span>></span>
                </div>
                </router-link>
                <!--查看更多下方图片-->
                <div class="group-list">
                <div class="group-list-item" v-for="(item,index) in grouplistarr.data">
                    <router-link
                    :to="{path:'/GroupShow',query:{line_id:item.line_id,product_id:item.product_id}}"
                    >
                    <img class="group-list-item-img" :src="item.img" />
                    <div class="group-list-item-days">
                        <span>{{item.days}}天</span>
                    </div>
                    <div class="group-list-item-city">
                        <img src="../assets/city-head-map.png" />
                        <span>{{item.city_name}}</span>
                    </div>
                    <div class="group-list-item-title">{{item.title}}</div>
                    <div class="group-list-item-price" v-if="item.groupOrder.length">
                        <div class="group-list-item-price-usd">
                        {{item.person_price_currency}}{{item.person_price}}
                        <span>/人起</span>
                        </div>
                        <div class="group-list-item-price-cny">￥{{item.person_price_cny}}/人起</div>
                    </div>
                    <div class="group-list-item-sth" v-if="item.groupOrder.length">
                        <div v-for="(dateItem,index) in item.groupOrder" v-if="index < 2">
                        <div class="group-list-item-sth-data">
                            <span>{{dateItem.startDateTitle}}</span>
                            <div class="group-list-item-sth-data-apply">{{dateItem.title}}</div>
                        </div>
                        </div>
                        <div class="group-list-item-sth-more">
                        <span>查看更多</span>
                        </div>
                    </div>
                    <div class="group-list-item-sth group-list-item-none" v-else>
                        <div class="group-list-item-price">
                        <div class="group-list-item-price-usd">
                            {{item.person_price_currency}}{{item.person_price}}
                            <span>/人起</span>
                        </div>
                        <div class="group-list-item-price-cny">￥{{item.person_price_cny}}/人起</div>
                        </div>
                        <div class="group-list-item-sth-more">
                        <span>发起拼游</span>
                        </div>
                    </div>
                    </router-link>
                </div>
                </div>
            </div>
            </div>
        </transition>
        <transition name="fade">
            <div v-if="CurrentCityGoods.length">
            <div class="rec">
                <div class="position-head">
                <div class="position-head-item">
                    <router-link to="/cityChoose" class="show-all-goods">
                    <img class="position-head-item-map" src="../assets/tabBar-destination-focus.png" />
                    <span class="position-head-item-name">{{nowCityInfo.name}}</span>
                    </router-link>
                </div>

                <router-link
                    :to="{path:'/city/',query:{city_id:nowCityInfo.city_id,city_name:encodeURI(nowCityInfo.name)}}"
                    class="show-all-goods"
                >查看全部</router-link>
                </div>
            </div>
            <div class="city-list">
                <div class="city-list-item" v-for="(item,index) in CurrentCityGoods" >
                    <router-link :to="'/show/'+item.goods_id">
                        <img class="city-list-item-img" :src="item.image" />
                        <!-- <div class="city-list-item-tag">
                            <span v-if="item.popular==1">热门</span>
                            <span v-if="item.recommend==1">立即出票</span>
                        </div> -->
                        <div class="city-list-item-cityName" v-if="item.city_name">
                            <img src="../assets/city_position.png" />
                            <span>{{item.country_name}} · {{item.city_name}}</span>
                        </div>
                        <div class="city-list-item-t1">{{item.name}}</div>
                        <!-- <div class="city-list-item-t2">{{item.subTitle}}</div> -->
                        <div class="city-list-item-goodstag" v-if="item.goodstag">
                            <span>{{item.goodstag}}</span>
                        </div>
                        <div class="city-list-item-price">
                            <div>¥ {{item.jiage}}</div>
                            <div class="sell">{{item.order_num}}人已购</div>
                        </div>
                    </router-link>
                </div>
            </div>
            <div class="rec">
                <router-link
                :to="{path:'/city/',query:{city_id:nowCityInfo.city_id,city_name:encodeURI(nowCityInfo.name)}}"
                class="rec-cityChoose"
                >更多当地体验</router-link>
            </div>
            </div>
        </transition>
        <transition name="fade">
            <div v-if="seasonGoods.length">
            <div class="rec">
                <div class="rec-title">当季活动推荐&nbsp&nbsp</div>
                <span class="rec-long"></span>
                <div class="rec-subtitle">&nbsp&nbsp最新最热的特色玩法</div>
            </div>
            <div class="city-list">
                <div class="city-list-item" v-for="(item,index) in seasonGoods">
                    <router-link :to="'/show/'+item.goods_id">
                        <img class="city-list-item-img" :src="item.image" />
                        <!-- <div class="city-list-item-tag">
                            <span v-if="item.popular==1">热门</span>
                            <span v-if="item.recommend==1">立即出票</span>
                        </div> -->
                        <div class="city-list-item-cityName" v-if="item.city_name">
                            <img src="../assets/city_position.png" />
                            <span>{{item.country_name}} · {{item.city_name}}</span>
                        </div>
                        <div class="city-list-item-t1">{{item.name}}</div>
                        <!-- <div class="city-list-item-t2">{{item.subTitle}}</div> -->
                        <div class="city-list-item-goodstag" v-if="item.goodstag">
                            <span>{{item.goodstag}}</span>
                        </div>
                        <div class="city-list-item-price">
                            <div>¥ {{item.jiage}}</div>
                            <div class="sell">{{item.order_num}}人已购</div>
                        </div>
                    </router-link>
                </div>
            </div>
            </div>
        </transition>
        <transition name="fade">
            <div v-if="hotGoods.length">
            <div class="rec">
                <div class="rec-title">热门活动推荐&nbsp&nbsp</div>
                <span class="rec-long"></span>
                <div class="rec-subtitle">&nbsp&nbsp高人气特色活动</div>
            </div>
            <div class="city-list">
                <div class="city-list-item" v-for="(item,index) in hotGoods">
                    <router-link :to="'/show/'+item.goods_id">
                        <img class="city-list-item-img" :src="item.image" />
                        <!-- <div class="city-list-item-tag">
                            <span v-if="item.popular==1">热门</span>
                            <span v-if="item.recommend==1">立即出票</span>
                        </div> -->
                        <div class="city-list-item-cityName" v-if="item.city_name">
                            <img src="../assets/city_position.png" />
                            <span>{{item.country_name}} · {{item.city_name}}</span>
                        </div>
                        <div class="city-list-item-t1">{{item.name}}</div>
                        <!-- <div class="city-list-item-t2">{{item.subTitle}}</div> -->
                        <div class="city-list-item-goodstag" v-if="item.goodstag">
                            <span>{{item.goodstag}}</span>
                        </div>
                        <div class="city-list-item-price">
                            <div>¥ {{item.jiage}}</div>
                            <div class="sell">{{item.order_num}}人已购</div>
                        </div>
                    </router-link>
                </div>
            </div>
            </div>
        </transition>
      </div>
      <div class="sectionWhite">
        <!--旅行攻略 精选原创 旅行指南-->
        <transition name="fade">
            <div>
            <div class="rec">
                <div class="rec-title">旅行攻略&nbsp&nbsp</div>
                <span class="rec-long"></span>
                <div class="rec-subtitle">&nbsp&nbsp精选原创&nbsp旅行指南</div>
            </div>
            <div class>
                <div class="concent">
                <div class="box">
                    <div class="Slidebox">
                    <div class="Slidebox-eve" v-for="(item,index) in listArr" :key="index">
                        <router-link :to="'/article/'+item.article_id">
                        <p>
                            <img :src="item.img" alt />
                        </p>

                        <div class="Slidebox-eve-strip">
                            <!--<span>{{item.create_time}}</span>-->
                            <p class="btns">
                            <!--下边得日期和3个图标-->
                            <span class="btns-item">
                                <img class="btns-item-img" src="../assets/icon-zhezhao-eye.png" alt />
                                {{item.article_id}}
                            </span>
                            <span class="btns-item" @click="like(index)">
                                <img class="btns-item-img" src="../assets/icon-zhezhao-lie.png" alt />
                                {{item.fabulous}}
                            </span>
                            <span class="btns-item">
                                <img class="btns-item-img" src="../assets/icon-zhezhao.png" alt />
                                {{item.comment_num}}
                            </span>
                            </p>
                        </div>
                        <div class="Slidebox-eve-text">
                            <p>{{item.title}}</p>
                        </div>
                        <p class="btns">
                            <!--下边得日期和3个图标-->
                            <span class="btns-item" @click="like(index)">
                            <img class="btns-item-img" src="../assets/icon-like.png" alt />
                            {{item.fabulous}}
                            </span>
                            <span class="btns-item">
                            <img class="btns-item-img" src="../assets/icon-comment22.png" alt />
                            {{item.comment_num}}
                            </span>
                        </p>
                        </router-link>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </transition>
        <div class="rec" v-if="city.length">
            <router-link to="./cityChoose" class="rec-title">
            <!-- {{item.name}} -->
            热门目的地城市推荐
            </router-link>
            <div class="rec-list">
            <div v-for="item2 in city" class="rec-list-item">
                <router-link
                :to="{path:'/city',query:{city_id:item2.data.city_id,city_name:encodeURI(item2.data.name)}}"
                >
                <img
                    class="rec-list-item-img"
                    :src="/^(http|https):\/\//.test(item2.data.img) ? item2.data.img : url+item2.data.img"
                />
                </router-link>
            </div>
            </div>
            <div class="rec-more">
            <router-link to="/cityChoose/" class="rec-more-url">更多目的地城市</router-link>
            </div>
        </div>
      </div>
      <div class="h160"></div>
      <TabBar :curr="tabCurr"></TabBar>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from "vuex";
import { Toast } from "mint-ui";
import TabBar from "../components/TabBar";
import wxShare from "../store/wxShare";
import config from "../store/config";
import store from "../store/store";
import * as types from "../store/types";
import serve from "../store/serve";
import storage from "../store/localstorage";
import crypto from "crypto";
import Vue from "vue";
import VueToasted from "vue-toasted";
import judgeURL from "../store/judgeURL";
Vue.use(VueToasted, {
  theme: "toasted-primary",
  position: "top-left"
});
export default {
  name: "home",
  components: {
    TabBar
  },
  data() {
    return {
      showPrise1: true,
      showPrise: false,
      show_nickname: true,
      visibility: "visible:",
      LifeGoods: [],
      strategyGoods: [],
      // 分页参数
      listArr: [],
      url: config.url,
      userInfo: [],
      userAvatar: require("../assets/hea-logo.png"), //默认显示头像
      userAVname: "快帮行",
      homeImg: null,
      username: null, //'+8613552622485',
      clientId: null, //'kbxDriver',
      loginKey: null, //'kwibonDriver2019',
      fTryAutoLogin: false,
      logo: require("../assets/logo.png"),
      url: config.url,
      tabCurr: 0,
      swiper: {
        data: [],
        auto: 3000
      },
      city: [],
      nowCityInfo: {},
      hotGoods: [],
      seasonGoods: [],
      CurrentCityGoods: [],
      collection: {
        img: require("../assets/city-head-heart.png"),
        imgHover: require("../assets/city-head-heart-hover.png")
      },
      grouplistarr: [],
      heashow: ""
    };
  },
  computed: mapState({
    appNestState: state => state.appNestState
  }),
  filters: {
    desstatus(value) {
      var status = open;
      if (status == open) {
        return "报名中";
      }
    }
  },
  methods: {
    swiperRouterTo(item) {
      switch (item.img_url.types) {
        case "goods":
          this.$router.push({ path: "./show/" + item.img_url.id });
          break;
        case "active":
          location.href = item.img_url.name;
          //                        this.$router.push({path: "./My-ticket-other-FL/"})//测试写给飞拉得页面
          break;
        case "article":
          this.$router.push({ path: "./article/" + item.img_url.id });
          break;
        case "city":
          this.$router.push({
            path: "/city",
            query: {
              city_id: item.img_url.id,
              city_name: encodeURI(item.img_url.name)
            }
          });
          break;
      }
    },
    getData() {
      this.axios
        .get("wapindex")
        .then(res => {
          this.getHotGoods();
          this.getSeasonGoods();
          if (res.data.image) {
            var swArr = res.data.image.filter(item => {
              return (
                item.img_url.types == "goods" ||
                item.img_url.types == "city" ||
                item.img_url.types == "active" ||
                item.img_url.types == "article"
              );
            });
            var reg = /^(http|https):\/\//;
            swArr.forEach(item => {
              if (!reg.test(item.img_src)) {
                item.img_src = this.url + item.img_src;
              }
              this.swiper.data.push(item);
            });
          }
          this.city = res.data.city;
          this.share();
          if(!this.isWechat){
            this.getlatandlong();
          }
        })
        .catch(err => console.log(err));
    },
    getHotGoods() {
      this.axios
        .post("hotgoods")
        .then(res => {
          // this.hotGoods = res.data.goods;
          var reg = /^(http|https):\/\//;
          res.data.goods.forEach(item => {
            if (!reg.test(item.image)) {
              item.image = this.url + item.image;
            }
            this.hotGoods.push(item);
          });
        })
        .catch(err => console.log(err));
    },
    getSeasonGoods() {
      this.axios
        .post("seasonGoods")
        .then(res => {
          // this.seasonGoods = res.data.goods;
          var reg = /^(http|https):\/\//;
          res.data.goods.forEach(item => {
            if (!reg.test(item.image)) {
              item.image = this.url + item.image;
            }
            this.seasonGoods.push(item);
          });
        })
        .catch(err => console.log(err));
    },
    getCurrentCityGoods(obj) {
      let params = {
        lat: obj.latitude,
        lng: obj.longitude
      };
      this.axios
        .postAll("currentcitygoods", params)
        .then(res => {
          if (res.data.code == 0 && res.data.data) {
            this.nowCityInfo = res.data.city;
            var reg = /^(http|https):\/\//;
            res.data.data.goods.forEach(item => {
              if (!reg.test(item.image)) {
                item.image = this.url + item.image;
              }
              this.CurrentCityGoods.push(item);
            });
          }
        })
        .catch(err => console.log(err));
    },
    getlatandlong() {
      //getCurrentPosition 需在https下使用 Garen
      let success = loc => {
        let location = {
          latitude: loc.coords.latitude, // 纬度
          longitude: loc.coords.longitude, // 经度
          accuracy: loc.coords.accuracy // 精确度
        };
        this.getCurrentCityGoods(location);
      };
      let error = error => {
        switch (error.code) {
          case error.PERMISSION_DENIED:
            console.log("定位失败,用户拒绝请求地理定位");
            break;
          case error.POSITION_UNAVAILABLE:
            console.log("定位失败,位置信息是不可用");
            break;
          case error.TIMEOUT:
            console.log("定位失败,请求获取用户位置超时");
            break;
          case error.UNKNOWN_ERROR:
            console.log("定位失败,定位系统失效");
            break;
          default:
           console.log("定位错误："+error);
           break;
        }
      };
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
      } else {
        console.log("浏览器不支持地理定位");
      }
    },
    getWxuserInfo() {
      var code = serve.getParam("code");
      var storageCode = "";
      if (storage.get("code")) {
        storageCode = storage.get("code");
      }
      if (code && code != storageCode) {
        this.axios.get("/authorization", { code: code }).then(res => {
          window.localStorage.code = code;
          window.localStorage.openid = res.data.openId;
          window.localStorage.unionid = res.data.unionId;
          window.localStorage.thumb = res.data.img;
          storage.set("qita", res.data.qita);
          if (res.data.member_id) {
            Toast({ message: "恭喜您，登录成功！", duration: 1000 });
            store.commit(types.LOGIN, res.data.token);
            storage.set("member_id", res.data.member_id);
            storage.set("userinfo", res.data);
            res.data.Integral.forEach(item => {
              if (item.types == 1) {
                storage.set("product_integra", item);
              } else if (item.types == 2) {
                storage.set("comment_integra", item);
              }
            });
            if (storage.get("loginurl")) {
              var loginurl = storage.get("loginurl");
              storage.remove("loginurl");
              this.$router.push({ path: loginurl });
            }
          } else {
            Toast({ message: "请绑定手机号码", duration: 1500 });
            this.$router.push({ path: "./my-reg-phone" });
          }
        });
      }
    },
    share() {
      let that = this;
      // 判断当前为飞拉
      let _title = "";
      if (storage.get("partner_id") && storage.get("partner_id") == "fl") {
        _title = "飞拉&";
      }
      wxShare(
        {
          title: _title + "快帮行", // 分享标题
          desc: "体验美好旅行生活！", // 分享描述
          imgUrl: this.swiper.data[0].img_src, // 分享图标
          debug: false,
          getLocation: true
        },
        function(res) {
          //分享成功后的回调函数
          if (res && res._type == "location") {
            that.getCurrentCityGoods(res);
          } else {
            console.log("分享成功");
          }
        }
      );
    },
    autoLogin() {
      let that = this;
      let now = new Date();
      let secret_code = now.toString();
      let strSecret = crypto
        .createHash("md5")
        .update(that.loginKey + secret_code)
        .digest("hex");

      let _params = {
        username: that.username,
        clientId: that.clientId,
        secret_code: secret_code,
        secret: strSecret
      };

      return that.axios
        .postAll("api/member/driverGetToken", _params)
        .then(res => {
          if (res.data.code == 200) {
            let userData = JSON.parse(res.data.data);
            storage.set("userinfo", userData.data);
            store.commit(types.LOGIN, userData.data.token);
            userData.data.Integral.forEach(item => {
              if (item.types == 1) {
                storage.set("product_integra", item);
              } else if (item.types == 2) {
                storage.set("comment_integra", item);
              }
            });

            //自动登录完成后刷新首页，首页商品应该更新为会员价格
            // location.reload(true);
          } else {
            Toast({ message: res.data.msg, duration: 1000 });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    sildelist() {
      var that = this;
      /*点击控制左侧导航栏显示和隐藏*/
      that.showPrise = !that.showPrise;
    },
    hiddenPrise() {
      var that = this;
      /*遮罩层点击控制左侧导航栏显示和隐藏*/
      that.showPrise = !that.showPrise;
    },
    getLifeGoods() {
      // LifeGoods 体验生活
      this.axios
        .post("/api/theme/getList")
        .then(res => {
          var reg = /^(http|https):\/\//;
          res.data.forEach(item => {
            if (!reg.test(item.image)) {
              item.image = this.url + item.image;
            }
            this.LifeGoods.push(item);
          });
        })
        .catch(err => console.log(err));
    },
    getStrategy() {
      let _that = this;
      let params = {
        class_id: 1,
        pagelimit: 10,
        pagenum: 1
      };
      _that.axios
        .postAll("gethomearticle", params)
        .then(res => {
          if (res) {
            if (res.data.code == 0 && res.data.data) {
              let listArr = _that.listArr;
              let listArrtext = JSON.stringify(listArr);
              var reg = /^(http|https):\/\//;
              res.data.data.data.forEach(item => {
                if (listArrtext.indexOf(JSON.stringify(item)) == -1) {
                  if (!reg.test(item.img)) {
                    item.img = _that.url + item.img;
                  }
                  listArr.push(item);
                }
              });
              _that.page += 1;
              _that.totalPage = res.data.data.totalpage;
              _that.listArr = listArr;

              if (_that.page <= _that.totalPage) {
                _that.loading = false;
                _that.loadEnd = true;
              }
              if (res.data.data.data.length < _that.pageSize) {
                _that.loadEnd = true;
              }
            } else {
              _that.loadEnd = true;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    upUserInfo() {
      this.axios
        .postAll("wap/token/index")
        .then(res => {
          if (res.data.code == 0) {
            this.userInfo = res.data.data;
            storage.set("userinfo", res.data.data);
            store.commit(types.LOGIN, res.data.data.token);

            if (this.userInfo.member_nickname !== "") {
              this.show_nickname = false;
            }
          }
        })
        .catch(err => console.log(err));
    },
    // 点赞  index暂时未定义
    like(index) {
      if (!this.$store.state.token) {
        this.$router.push({ path: "/my-login" });
        return;
      }
      var item = this.listArr[index];
      var params = {
        article_id: item.article_id
      };
      this.axios
        .post("wapfabulous", params)
        .then(res => {
          Toast({ message: res.msg, duration: 1000 });
          if (res.msg == "点赞成功") {
            this.listArr[index].fabulous += 1;
          } else {
            this.listArr[index].fabulous -= 1;
          }
        })
        .catch(err => console.log(err));
    },
    //首页拼游展示
    grouplist() {
      this.axios
        .postAll("/recgrouptours")
        .then(res => {
          if (res.data.code == 200) {
            this.grouplistarr = res.data;
            this.heashow = res.data.data;
          }
        })
        .catch(err => console.log(err));
    }
  },
  mounted() {
    this.upUserInfo();
    this.getData();
    this.getLifeGoods();
    this.getStrategy();
    this.grouplist(); //home页得拼游列表
    let that = this;
    // that.autoLogin();
    //监听RN发过来的消息
    document.addEventListener("message", function(data) {
      let message = data.data;
      let messageObject = JSON.parse(message);
      if (messageObject.command) {
        switch (messageObject.command) {
          case "RNMessage": {
            break;
          }
          case "AutoLogin": {
            store.commit("setAppNestState", true); //隐藏tab bar
            let token = that.$store.state.token;
            if (!that.fTryAutoLogin && token === null) {
              that.fTryAutoLogin = true;

              if (messageObject.content) {
                that.username = messageObject.content.username;
                that.clientId = messageObject.content.clientId;
                that.loginKey = messageObject.content.loginKey;
                that.appid = messageObject.content.appid;

                if (that.appid && that.appid.length > 0) {
                  window.localStorage.appid = that.appid;
                }
                that.autoLogin();
                this.getvisibility(); //隐藏掉侧边栏menu 在司导端
              }
              break;
            }
            break;
          }
        }
      }
    });

    //判断是否有飞拉旅行参数显示默认
    //            var FeiL=storage.get('partner_id')
    if (storage.get("partner_id")) {
      this.userAvatar = require("../assets/FeiLa-hea.png");
      this.userAVname = "飞拉旅行";
    }
  },
  created() {
    if (!this.$store.state.token) {
      this.getWxuserInfo(); //请求微信授权
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/base";

.sidebar-box {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  &-menuicon {
    display: inline-block;
    > img {
      width: rpx(37);
      height: rpx(34);
      padding: rpx(15) rpx(0) rpx(16) rpx(15);
    }
  }
  &-seabox {
    display: inline-block;
    padding-left: rpx(30);
  }
}
/*左侧菜单栏*/
.silebar-show {
  transition: width 5s;
  position: fixed;
  float: left;
  width: 75%;
  max-height: 100%;
  height: 100%;
  background: #333;
  z-index: 6;
  /*animation: aaa 5s forwards;*/
  animation: myfirst 0.3s;
  -webkit-animation: myfirst 0.3s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {
  0% {
    width: 0%;
  }
  100% {
    width: 75%;
  }
}

/*content主界面*/
.content {
  background-color: #f3f3f3;
  position: absolute;
  width: 100%;
  height: 100%;
}
/* top部分*/
.top {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 30%;
}
/*top背景*/
.top img {
  height: 100%;
  width: 100%;
}
/*top阴影层*/
.top .a {
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.4;
}
/*top_头像*/
.top .tx {
  width: 200px;
  height: 200px;
  position: absolute;
  z-index: 110;
  top: 50%;
  left: 33%;
  border-radius: 50%;
  border: 2px solid #f3f3f3;
}
/*左侧导航栏*/
.left {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: -2;
  top: 0px;
}
/*右侧隐藏层*/
.hidden {
  border: 1px solid #000000;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 5;
  background-color: #000000;
  top: 0px;
  opacity: 0.5;
}
.silebar-hea {
  position: relative;
  height: rpx(330);
  /*background-image: url("../assets/sidebar-home-hea-bagr.jpg");*/
  /*background-repeat:no-repeat;*/
  background-image: url("../assets/ba.jpg");
  /*background-size: 100%;*/
  background-size: cover;
}
.silebar-hea-shade {
  position: absolute;
  top: 0;
  background: black;
  height: 4.4rem;
  width: 100%;
  background: black;
  opacity: 0.1;
  z-index: 5;
}

/*左侧导航栏头像*/
.silebar-hea img {
  position: left;
  margin: rpx(41) rpx(0) rpx(32) rpx(18);
  z-index: -1;
  width: rpx(150);
  height: rpx(150);
  border-radius: 50%;
}
.silebar-hea p {
  padding-left: rpx(40);
  color: #ffffff;
  font-size: rpx(30);
  font-weight: bold;
}
/*导航栏列表*/
.left ul {
  background: #ffffff;
  color: #000032;
  font-family: SourceHanSansCN-Normal;
  list-style: none;
  font-size: rpx(32);
  line-height: rpx(60);
}
.left li {
  /*margin: rpx(60) rpx(0) rpx(0) rpx(104);*/
  > img {
    margin: rpx(40) rpx(25) rpx(40) rpx(40);
    width: rpx(38);
    height: rpx(38);
  }
  /*>span{
         padding: rpx(60) rpx(0) rpx(50) rpx(0);
     }*/
}

/*左侧菜单栏*/
.search-btn {
  @include position(absolute, rpx(0), rpx(0));
  z-index: 999;
  text-align: center;
  padding: 20px;
  &-box {
    @include size(rpx(90), rpx(90));
    background: $color0;
    border-radius: 100%;
    line-height: rpx(80);
    &-img {
      width: rpx(44);
      height: rpx(44);
    }
  }
}
.search-btn1 {
  display: inline-block;
  margin: rpx(15) rpx(15) rpx(16) 0;
  &-sea {
    height: rpx(60);
    position: relative;
    > input {
      height: rpx(60);
      line-height: rpx(60);
      border-radius: rpx(10);
      width: rpx(630);
    }
    > i {
      position: absolute;
      right: 0;
      margin: rpx(15) rpx(16) rpx(15) 0;
    }
  }
}
.search-btn1 input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999999;
  font-size: rpx(24);
  padding-left: rpx(20);
}
.sectionGray{
    background-color: #f3f3f3;
    padding: rpx(10) 0 rpx(20) 0;
}
.sectionWhite{
    background-color: #ffffff;
}
.rec {
  position: relative;
  padding: 0 rpx(20) 0;
  &-title {
    display: inline-block;
    font-size: rpx(40);
    font-weight: bold;
    padding: rpx(40) 0 rpx(40) rpx(10);
  }
  &-long {
    position: relative;
    top: rpx(7);
    display: inline-block;
    width: 1px;
    height: rpx(45);
    font-size: rpx(40);
    font-weight: bold;
    background: #000000;
  }
  &-subtitle {
    display: inline-block;
    font-size: rpx(28);
    color: rgb(51, 51, 51);
  }
  &-look {
    position: absolute;
    top: rpx(50);
    right: rpx(20);
    display: inline-block;
    font-size: rpx(28);
    color: #666666;
    font-weight: bold;
  }
  &-list {
    display: flex;
    flex-wrap: wrap;
    &-item {
      width: 33.33%;
      height: auto;
      padding: 0 rpx(10) rpx(20);
      &-img {
        width: 100%;
        height: rpx(140);
        border-radius: $radius6;
      }
    }
  }
  &-more {
    padding: rpx(20) rpx(10) 0;
    &-url {
      display: block;
      padding: rpx(20) rpx(30);
      font-size: rpx(34);
      text-align: center;
      border: #b5b5b5 solid 1px;
      border-radius: $radius6;
    }
  }
  &-cityChoose {
    margin-top: rpx(20);
    display: block;
    padding: rpx(20) rpx(30);
    font-size: rpx(34);
    text-align: center;
    border: #b5b5b5 solid 1px;
    border-radius: $radius6;
  }
}
.concent {
  vertical-align: top;
  width: 100%;
  max-width: rpx(850);
  min-width: rpx(320);
}
.box {
  white-space: nowrap;
  overflow-x: auto;
  vertical-align: top;
}
.Slidebox {
  > div {
    vertical-align: top;
    width: rpx(530);
    overflow: hidden;
    position: relative;
    background: #fff;
    /*padding-bottom: 0.4rem;*/
    margin: 0 0.26667rem 0;
    border-radius: 0.08rem;
    margin-bottom: 0.4rem;
    -moz-box-shadow: 2px 2px 5px #969696; /*firefox*/
    -webkit-box-shadow: 2px 2px 5px #969696; /*webkit*/
    box-shadow: 2px 2px 10px #969696; /*opera或ie9*/
    display: inline-block;
  }
  &-eve {
    vertical-align: top;
    img {
      position: relative;
      width: 100%;
      height: rpx(370);
      vertical-align: baseline;
    }
    &-text {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      vertical-align: top;
      height: rpx(85);
      padding-right: rpx(4);
      p {
        vertical-align: top;
        /*width: rpx(530);*/
        text-align: left;
        padding: rpx(10) rpx(30) 0 rpx(30);
        font-size: rpx(30);
        line-height: 160%;
        font-weight: bold;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        /*box-shadow: 2px 2px 2px #969696;*/
        color: #666;
      }
      span {
        vertical-align: top;
        padding: rpx(10) rpx(30) 0 rpx(30);
        font-size: rpx(26);
        line-height: 160%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .Slidebox-eve-datatime {
      font-size: rpx(26);
      color: #666666;
    }
    .btns {
      display: inline-block;
      /*height: rpx(15);
        bottom: -0.65333rem;
        right: rpx(20);*/
      /*min-width: 3.73333rem;*/
      font-size: 0.37333rem;
      position: absolute;
      right: rpx(20);
      color: #e5e5e5ba;
      /*text-align: right;
    padding: rpx(20) rpx(10) rpx(30) rpx(30);*/
      &-item {
        margin-right: rpx(15);
        font-size: rpx(28);
        color: #e5e5e5ba;
        &-img {
          margin-right: rpx(10);
          width: rpx(24);
          height: rpx(22);
        }
      }
    }
  }
}
.Slidebox-eve-strip {
  position: absolute;
  top: rpx(310);
  width: 100%;
  background-color: rgba(black, 0.3);
  height: rpx(60);
  padding: rpx(10);
  z-index: 2;
  font-size: rpx(25);
  color: $color0;
}
.slidebox-titname {
  font-weight: 700;
  position: absolute;
  top: rpx(50);
  left: rpx(30);
  font-size: rpx(40);
  color: #ffffff;
  text-shadow: rpx(5) rpx(5) rpx(6) rgba(0, 0, 0, 0.5);
}
.home {
  padding-bottom: rpx(100);
  background: #f5f5f5;
}

.h160 {
  height: rpx(160);
}

.navList{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: rpx(20);
    margin-top: rpx(20);
    a{
        text-align: center;
        font-size: rpx(28);
        img{
            width: rpx(130);
        }
        span{
            display: inline-block;
            margin-top: rpx(15);
        }
    }
}
.themeList{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 rpx(60);
    a{
        text-align: center;
        font-size: rpx(26);
        border-right: .5px solid #ceced0;
        img{
            width: rpx(90);
        }
        span{
            display: inline-block;
            margin-top: rpx(15);
        }
    }
    a:last-child{
        border: none;
    }
    
}



.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0;
}
.city-list {
  width: 100%;
  // padding: rpx(2.6) rpx(20) 0 rpx(20);
  padding: 2.66% 2.66% 0 2.66%;
  overflow: hidden;
  &-item {
    float: left;
    box-sizing: border-box;
    width: 48.67%;
    margin-right: 2.66%;
    margin-bottom: 2.66%;
    position: relative;
    background: $color0;
    border-radius: rpx($radius6);
    -moz-box-shadow: 2px 2px 5px #969696; /*firefox*/
    -webkit-box-shadow: 2px 2px 5px #969696; /*webkit*/
    box-shadow: 2px 2px 10px #969696; /*opera或ie9*/
    &-img {
      width: 100%;
      height: rpx(200);
      border-radius: rpx($radius6) rpx($radius6) 0 0;
      z-index: 1;
    }
    &-tag {
      position: absolute;
      right: rpx(20);
      top: rpx(20);
      z-index: 2;
      span {
        display: inline-block;
        margin-right: rpx(20);
        min-width: rpx(90);
        padding: 0 rpx(10);
        height: rpx(40);
        line-height: rpx(40);
        border-radius: $radius6;
        background: $color3;
        text-align: center;
        font-size: rpx(24);
        color: $color0;
      }
    }
    &-goodstag {
        position: absolute;
        left: rpx(0);
        top: rpx(145);
        margin: 0 0 rpx(10) rpx(15);
        display: inline-block;
        height: rpx(40);
        line-height: rpx(40);
        border-radius: $radius6;
        background: #ff7c00;
        text-align: center;
        font-size: rpx(24);
        color: #fff;
        padding: 0 rpx(10);
    }
    &-cityName {
      position: absolute;
      top: rpx(5);
      right: rpx(5);
      z-index: 2;
      background-color: rgba(black, 0.7);
      padding: rpx(5) rpx(5) 0;
      border-radius: rpx(20);
      display: flex;
      align-items: center;
      img {
        width: rpx(22);
        height: rpx(22);
        padding-bottom: rpx(5);
      }
      span {
        display: inline-block;
        color: $color0;
        padding: 0 rpx(6);
        font-size: rpx(20);
        font-weight: 300;
      }
    }
    &-t1 {
      margin: rpx(15);
      font-weight: bold;
      font-size: rpx(30);
      line-height: 130%;
      min-height: rpx(76);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    &-price {
        padding: 0 rpx(15) rpx(15);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: rpx(24);
        color: $color3;
        .sell{
            font-size: rpx(24);
            color: #999;
        }
    }
  }
  &-item:nth-child(2n){
    margin-right: 0;
  }
}
.position-head {
  // position: relative;
  margin: rpx(40) 0 rpx(20) 0;
  border-radius: rpx(5);
  width: 100%;
  height: rpx(84);
  display: flex;
  align-items: center;
  justify-content: space-between;
  // background: rgba(251,125,51,0.7);
  &-item {
    &-map {
      width: rpx(48);
      // height: rpx(32);
      margin-right: rpx(10);
      padding-bottom: rpx(14);
      animation: position-fade 4s infinite ease-out;
    }
    &-name {
      font-size: rpx(40);
      // color: $color0;
      color: #fb7d33;
    }
  }
}
.position-title {
  margin: rpx(20) 0;
  font-size: rpx(32);
  font-weight: bold;
  text-align: center;
  // color: #FB7D33;
}
.show-all-goods {
  display: inline-block;
  font-size: rpx(26);
  padding: rpx(20);
  color: #999999;
}

@keyframes position-fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.mint-banner {
  height: rpx(440);
}
.mint-banner .mint-swipe {
  height: rpx(440) !important;
}
.mint-banner .mint-swipe-items-wrap {
  height: rpx(440) !important;
}
.mint-banner .mint-swipe-item {
  &-img {
    width: 100%;
    height: rpx(440);
  }
}
.mint-banner .mint-img-me {
  height: rpx(440);
}

/*头部拼图卡片区*/
.group-list {
  /*padding: rpx(30);*/
  &-item {
    position: relative;
    background: $color0;
    border-radius: rpx($radius6);
    -moz-box-shadow: 2px 2px 5px #969696; /*firefox*/
    -webkit-box-shadow: 2px 2px 5px #969696; /*webkit*/
    box-shadow: 2px 2px 10px #969696; /*opera或ie9*/
    overflow: hidden;
    &-img {
      width: 100%;
      height: rpx(300);
      border-radius: rpx($radius6) rpx($radius6) 0 0;
      z-index: 1;
    }
    &-days {
      position: absolute;
      left: 0;
      top: 0;
      padding: rpx(10) rpx(15);
      z-index: 2;
      color: #ffffff;
      background: #ff7d00;
      font-size: rpx(25);
    }
    &-city {
      position: absolute;
      right: rpx(20);
      top: rpx(10);
      z-index: 2;
      img {
        width: rpx(26);
        height: rpx(26);
      }
      span {
        display: inline-block;
        color: $color0;
        padding: 0 rpx(6);
        font-size: rpx(25);
      }
    }
    &-title {
      color: #333;
      width: 100%;
      padding: rpx(5) rpx(20);
      line-height: rpx(60);
      font-size: rpx(32);
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &-price {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      padding-left: rpx(20);
      // font-size: rpx(30);
      span {
        font-size: rpx(30);
      }
      &-usd {
        color: #ff7d01;
        font-weight: bold;
        font-size: rpx(40);
      }
      &-cny {
        color: #999;
        margin-left: rpx(25);
        font-size: rpx(28);
      }
    }
    &-sth {
      position: relative;
      min-height: rpx(95);
      display: flex;
      align-items: center;
      padding-left: rpx(10);
      &-data {
        margin: rpx(15) 0;
        padding: 0 rpx(15);
        min-width: rpx(178);
        text-align: center;
        line-height: rpx(35);
        border-right: rpx(1) solid #ccc;
        span {
          font-size: rpx(26);
          font-weight: 500;
          color: #333333;
        }
        &-apply {
          font-size: rpx(22);
          color: #ff7d00;
          font-weight: bold;
          text-align: center;
        }
      }
      &-newempty {
        text-align: center;
        color: #333333;
        line-height: rpx(65);
        margin: rpx(15) rpx(20);
        width: rpx(186);
        padding: rpx(0) rpx(10);
        font-weight: bold;
        border-radius: rpx(10);
        border: rpx(1) solid #999;
      }
      &-more {
        position: absolute;
        right: rpx(25);
        top: 0;
        bottom: 0;
        margin: auto;
        line-height: 100%;
        display: flex;
        align-items: center;
        span {
          background: #ff7d00;
          color: #fff;
          font-size: rpx(24);
          padding: rpx(5) rpx(10);
          border-radius: rpx(10);
        }
      }
      &-line {
        margin: rpx(15) 0;
        width: rpx(1);
        background: #ccc;
        height: rpx(62);
      }
    }
  }
}
</style>